<template>
    <div>
      <el-card style="margin-top: 10px">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="openAdd">新增</el-button>
        </div>
        <el-table border :data="dataList" v-loading="tableLoading">
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column label="类型" prop="ftype" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="地址" prop="faddress" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="备注" prop="fdescription" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openEdit(scope.row.fid)">编辑</el-button>
              <el-button type="text" @click="openEditLogin(scope.row.fid)">配置登录信息</el-button>
              <el-button type="text" style="color: red" @click="deleteData(scope.row.fid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float:right; margin: 10px 0;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="totalRows">
        </el-pagination>
      </el-card>
      <baseApiEdit v-if="isShowAddEdit" :fid="fid" :status="status" @close="closeAddEdit"></baseApiEdit>
      <loginLocalEdit v-if="isShowEditLocal" :fid="fid" @close="closeAddEdit"></loginLocalEdit>
      <loginK3CloudEdit v-if="isShowEditK3Cloud" :fid="fid" @close="closeAddEdit"></loginK3CloudEdit>
      <loginEasEdit v-if="isShowEditEas" :fid="fid" @close="closeAddEdit"></loginEasEdit>
    </div>
</template>

<script>
  import BaseApi from '@/api/module/BaseApi'
  export default {
    name: 'baseapi',
    components:{
      baseApiEdit: resolve => require(['./components/baseapi_edit'], resolve),
      loginLocalEdit: resolve => require(['./components/loginlocal_edit'], resolve),
      loginK3CloudEdit: resolve => require(['./components/logink3cloud_edit'], resolve),
      loginEasEdit: resolve => require(['./components/logineas_edit'], resolve),
    },
    data(){
      return{
        tableLoading : false,
        dataList : [],
        page: 1, //当前页面
        pageSize : 10, // 当前页数
        totalRows : 0, // 总条数
        fid : null,
        isShowAddEdit : false,
        isShowEditLocal : false,
        isShowEditK3Cloud : false,
        isShowEditEas : false,
        api : new BaseApi(),
        status : '',
      }
    },
    created(){
      this.getData()
    },
    methods:{
      getData(){
        this.tableLoading = true
        let data = {
          pageSize : this.pageSize,
          page : this.page,
        }
        this.api.queryListPage(data).then(res => {
          this.dataList = res.data.rows
          this.page = res.data.page
          this.pageSize = res.data.pageSize
          this.totalRows = res.data.totalRows
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(page){
        this.page = page
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize){
        this.pageSize = pageSize
        this.getData()
      },
      //打开新增弹窗
      openAdd(){
        this.fid = null
        this.status = 'add'
        this.isShowAddEdit = true
      },
      //打开编辑弹窗
      openEdit(id){
        this.fid = id
        this.status = 'edit'
        this.isShowAddEdit = true
      },
      async openEditLogin(id){
        this.fid = id
        this.tableLoading = true
        let data = await this.api.detail({fid:this.fid})
        this.tableLoading = false
        if(data.data.ftype=='本地'){
          this.isShowEditLocal = true
        }else if(data.data.ftype=='K3CLOUD'){
          this.isShowEditK3Cloud = true
        }
        else if(data.data.ftype=='EAS'){
          this.isShowEditEas = true
        }
      },
      //关闭新增编辑弹窗
      closeAddEdit(isOk){
        this.isShowAddEdit = false
        this.isShowEditLocal = false
        this.isShowEditK3Cloud = false
        this.isShowEditEas = false
        this.fid = null
        if(isOk){
          this.getData()
        }
      },
      //删除
      deleteData(fid){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: `删除中，请耐心等待.....`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.api.delete({"fid":fid}).then(res => {
            this.$tie.showSuccess(res.message)
            loading.close()
            this.getData()
          }).catch(e => {
            loading.close()
          })
        }).catch(() => {
        })
      },
    },
  }
</script>
<style scoped>
</style>
